import React, { useEffect, useLayoutEffect, useState } from "react";

/* 
### useEffect和useLayoutEffect有什么区别？

**简单来说就是调用时机不同，`useLayoutEffect`和原来`componentDidMount`&`componentDidUpdate`一致，在react完成DOM更新后马上**同步**调用的代码，会阻塞页面渲染。而`useEffect`是会在整个页面渲染完才会调用的代码。**

官方建议优先使用`useEffect`

> However, **we recommend starting with useEffect first** and only trying useLayoutEffect if that causes a problem.

在实际使用时如果想避免**页面抖动**（在`useEffect`里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放在`useLayoutEffect`里。关于使用`useEffect`导致页面抖动。

不过`useLayoutEffect`在服务端渲染时会出现一个warning，要消除的话得用`useEffect`代替或者推迟渲染时机。

*/
const App = () => {
  const [count, setCount] = useState(0);
  // useEffect(() => {
  //   let pre = Date.now();
  //   while(Date.now()-pre<500){
  //    // pre = Date.now()
  //   }
  //   if (count === 0) setCount(count + Math.random());
  // });
  useLayoutEffect(() => {
    let pre = Date.now();
    while(Date.now()-pre<500){
     // pre = Date.now()
    }
    if (count === 0) setCount(count + Math.random());
  });
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={()=>{setCount(0)}}>设置数字</button>
    </div>
  );
};

export default App;